<template>

  <el-row class="home" :gutter="20">
    <!-- 左边布局 -->
    <el-col :span="12" style="margin-top: 20px">

      <!-- 管理员-->
      <el-card shadow="hover" class="user1">
        <div>
          <div class="_border">
            <div class="user">
              <div class="userinfo">
                <p class="name">Admin</p>
                <p class="access">超级管理员1</p>
              </div>
            </div>
            <!-- 登录日期 -->
            <div class="login-info">
              <p>上次登录时间：<span>2022-09-26</span></p>
              <p>上次登录地点：<span>呼和浩特</span></p>
            </div>
          </div>
          <div>
            <el-button type="success" round @click="gotopage">地图展示</el-button>
          </div>

        </div>
      </el-card>
      <el-card class="tableview">
        <el-table
          :data="tableDataList"
          border
          style="width: 100%;
          line-height: 50px">
          <el-table-column
            prop="id"
            label="ID"
            width="60px">
          </el-table-column>
          <el-table-column
            prop="text"
            label="规章制度"
            width="555px">
          </el-table-column>
        </el-table>

      </el-card>
    </el-col>
    <!--      右边布局-->
    <el-col :span="12" style="margin-top: 20px" class="leftview">
      <!-- 柱状图-->
      <el-card shadow="hover" style="height: 280px">
        <div ref="echarts" style="height: 280px">
          <div id="myChart"></div>
        </div>
      </el-card>
      <div class="graph">
        <!-- 饼状图-->
        <el-card shadow="hover" style="height: 300px">

          <div id="animalCount">

          </div>
        </el-card>
        <!--柱状图-->
        <el-card shadow="hover" style="height: 300px">
          <div>
            <div id="employCount"></div>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import echarts from "echarts";
import {getAnimalNum, getEmployeeNum, getPlantNum, getTableNum} from "@/api/lookview/showline";

export default {
  name: "showLine",
  data() {
    return {
      plantDataList: [],
      animalDataList: [],
      employDataList: [],
      tableDataList: [],
      obj: {
        id: 1
      },
    }
  },

  methods: {
    /* 跳转到地图页面 */
    gotopage: function () {
      this.$router.push(
        {
          name: 'map'
        }
      )
    },
    /* 厂房信息柱状图 */
    plantNum() {
      getPlantNum(this.obj)
        .then(res => {
          this.plantDataList = res.data
          let myChart = echarts.init(document.getElementById('myChart'))
          myChart.setOption({
            title: {
              text: "厂房信息柱状图",
            },

            xAxis: {
              type: 'category',
              data: this.plantDataList.xAxis
            },

            yAxis: {
              type: 'value'
            },

            series: [
              {
                type: 'bar',
                barWidth: 30,
                data: this.plantDataList.series
              }
            ]
          })
        })
    },
    /*-----------------------------------------*/
    /* 动物信息饼图 */
    animalNum() {
      getAnimalNum()
        .then(res => {
          this.animalDataList = res.data
          let animalCount = echarts.init(document.getElementById('animalCount'))
          animalCount.setOption({
              title: {
                text: '动物的信息管理展示'
              },
              series: [
                {
                  type: 'pie',
                  radius: '50%',
                  data: this.animalDataList,
                }
              ],
            }
          )
        })
    },
    /* 员工信息柱状图 */
    employeeNum() {
      getEmployeeNum()
        .then(res => {
          this.employDataList = res.data
          let employCount = echarts.init(document.getElementById('employCount'))
          employCount.setOption({
            title: {
              text: "员工信息柱状图",
            },

            xAxis: {
              type: 'category',
              data: this.employDataList.xAxis
            },

            yAxis: {
              type: 'value'
            },

            series: [
              {
                type: 'bar',
                barWidth: 30,
                data: this.employDataList.series
              }
            ]
          })
        })

    },
    /*  规章制度的table */
    tableNum() {
      getTableNum()
        .then(res => {
            // this.tableDataList = res.tableCount.data
            this.tableDataList = res.data
            console.log("tableNum---res.data:", res.data)
            console.log("tableNum---this.tableDataList:", this.tableDataList)

          }
        )
    }
  },

  mounted() {
    this.plantNum();
    this.animalNum();
    this.employeeNum();
    this.tableNum();
  }
}
</script>

<style scoped>
#myChart {
  width: 600px;
  height: 300px;
  align-content: center;
}

#animalCount {
  width: 600px;
  height: 300px
}

#employCount {
  width: 600px;
  height: 300px;
  align-content: center;
}

.home {
  background-image: url("assert/1.jpg");
}

.leftview {
  text-align: center;
  background-color: deepskyblue;
  opacity: 0.7;
}

.user1 {
  text-align: center;
  opacity: 0.7;
}

.tableview {
  text-align: center;
  opacity: 0.7;
  background-color: #5cd9e8;
}

._borderWrap {

  width: 580px;

  height: 150px;

  position: absolute;

  left: 23%;

  top: 25%;

}

._border {
  text-align: center;
  font-size: 25px;

  font-weight: bolder;

  -webkit-text-fill-color: transparent;

  background-image: -webkit-linear-gradient(left, #129835, #ece648 25%, #129835 50%, #F9E92B 75%, rgb(40, 150, 38));

  background-size: 200%, 100%;

  -webkit-background-clip: text;

  -webkit-animation: word 0.5s linear infinite;

}

@keyframes word {

  0% {
    background-position: 0 0
  }

  100% {
    background-position: -100% 0
  }

}
</style>


